<template>
	<view class="all">
		<input v-model="content" class="input" maxlength="20" placeholder="请输入要查询的备注~"/>
		<button class="search" @click="search" size="mini">查询</button>
		<button class="add" type="primary" @click="toAddPasswordBook" size="mini">新增</button>
		<text class="tip">tip:当前查询为根据输入内容模糊查询匹配备注</text>
		<view class="show_panel">
			<view v-if="passwordBooks.data.length==0" style="text-align: center;">
				您要找的内容不存在/等待查询~
			</view>
			<view v-else style="overflow-y: scroll;">
				<view style="border-bottom: 1px dashed gray;" v-for="item in passwordBooks.data">
					<text>备注</text><br/>
					<text>{{item.content}}</text><br/>
					<text>账号</text><br/>
					<text>{{item.account}}</text><br/>
					<text>密码</text><br/>
					<text>{{item.password}}</text><br/>
					<button @click="copy('备注：'+item.content+'\n账号：'+item.account+'\n密码：'
					+item.password)">复制</button>
					<button @click="del(item.content)" type="warn">删除</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { ref,reactive } from 'vue'
	
	export default {
		data() {
			var content=ref("")
			var passwordBooks=reactive({
				data:[]
			})
			return {
				content,
				passwordBooks
			}
		},
		onShow() {
			var local=uni.getStorageSync("passwordBooks")
			if(local!=''){
			    local=JSON.parse(local)
				this.passwordBooks.data=[]
				for(var i=0;i<local.length;i++){
					if(local[i].content.includes(this.content)){
						this.passwordBooks.data.push(local[i])
					}
				}
			}
		},
		methods: {
			search(){
				if(this.content==''){
					uni.showToast({
						title:'输入框不能为空',
						icon:'error'
					})
					return
				}
				this.passwordBooks.data=[]
				var local=uni.getStorageSync("passwordBooks")
				if(local!=''){
				    local=JSON.parse(local)
					for(var i=0;i<local.length;i++){
						if(local[i].content.includes(this.content)){
							this.passwordBooks.data.push(local[i])
						}
					}
					if(this.passwordBooks.data.length==0){
						uni.showToast({
							title:'查询为空~',
							icon:'exception'
						})
					}
				} else {//本地还未开始存储账号密码
				    uni.showToast({
				    	title:'存储未开始',
						icon:'exception'
				    })
				}
			},
			toAddPasswordBook(){
				uni.navigateTo({
					url:'/pages/tool/passwordBook/addPasswordBook/addPasswordBook'
				})
			},
			copy(text){
				uni.showModal({
					cancelText:'去除备注',
					confirmText:'保留备注',
					content:'剪切板如下：\n'+text+'\n请选择是否保留备注！',
					success:function(res){
						if(res.cancel){//去除备注
							var texts=text.split("\n")
							text=texts[1]+'\n'+texts[2]
						}
						uni.setClipboardData({
							data:text
						})
					}
				})
			},
			del(content){//有待优化：优化方向，移除数组内的某个元素
				uni.showModal({
					content:"请确认是否真的要删除此记录？\n记录备注信息：\n"+content,
					success:(res)=>{
						if(res.confirm){//用户确认删除
							var local=uni.getStorageSync("passwordBooks")
							local=JSON.parse(local)//用户能点击删除按钮，说明local不可能为空
							var newLocal=[]
							for(var i=0;i<local.length;i++){//本地移除
								if(local[i].content!=content){
									newLocal.push(local[i])
								}
							}
							var newPage=[]
							for(var i=0;i<this.passwordBooks.data.length;i++){//页面移除
								if(this.passwordBooks.data[i].content!=content){
									newPage.push(this.passwordBooks.data[i])
								}
							}
							this.passwordBooks.data=newPage
							uni.setStorageSync("passwordBooks",JSON.stringify(newLocal))
							uni.showToast({
								title:"删除成功"
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.all{
	margin: 0;
	padding: 0;
	.input{
		position: absolute;
		padding-left: 1rem;
		top: 1vh;
		left: 5vw;
		width: 50vw;
		height: 2rem;
		max-height: 6vh;
		box-sizing: border-box;
		border: 1px solid gray;
	}
	.search{
		position: absolute;
		width: 20vw;
		min-width: 4rem;
		height: 2rem;
		max-height: 6vh;
		left: 55vw;
		top: 1vh;
	}
	.add{
		position: absolute;
		width: 20vw;
		min-width: 4rem;
		height: 2rem;
		max-height: 6vh;
		left: 75vw;
		top: 1vh;
	}
	.tip{
		position: absolute;
		left: 5vw;
		top: 6vh;
		max-height: 4vh;
		font-size: small;
	}
	.show_panel{
		position: absolute;
		width: 90vw;
		height: 80vh;
		top: 10vh;
		margin-left: 5vw;
		border: 1px solid gray;
		box-sizing: border-box;
	}
}
</style>
